<div class="container">
    <page-header title="Queries"></page-header>
    <tab-nav tabs="$ctrl.tabs"></tab-nav>
    <div class="bg-white tiled p-10">
      <form class="form-inline" role="form" ng-submit="$ctrl.search()">
        <div class="input-group">
            <input class="form-control input-sm" placeholder="Search..." ng-model="$ctrl.term" autofocus>
            <span class="input-group-btn">
              <button class="btn btn-primary" type="submit">
                <span class="zmdi zmdi-search"></span>
              </button>
            </span>
        </div>
      </form>
    </div>
    <div class="bg-white tiled">
      <table class="table table-condensed table-hover">
        <thead>
          <tr>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy('name')">Name <sort-icon column="'name'" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon></th>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy($ctrl.createdBySort)">Created By <sort-icon column="$ctrl.createdBySort" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon></th>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy($ctrl.createdAtSort)">Created At <sort-icon column="$ctrl.createdAtSort" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon></th>
            <th class="sortable-column" ng-click="$ctrl.paginator.orderBy($ctrl.scheduleSort)">Update Schedule <sort-icon column="$ctrl.scheduleSort" sort-column="$ctrl.paginator.orderByField" reverse="$ctrl.paginator.orderByReverse"></sort-icon></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="query in $ctrl.paginator.getPageRows()">
            <td><a href="queries/{{query.id}}">{{query.name}}</a> <span class="label label-default" ng-if="query.is_draft">Unpublished</span></td>
            <td>
              <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb"/>
              {{query.user.name}}</td>
            <td>{{query.created_at | dateTime}}</td>
            <td>{{query.schedule | scheduleHumanize}}</td>
          </tr>
          <tr ng-if="$ctrl.paginator.rows.length == 0">
            <td>No results found.</td>
          </tr>
        </tbody>
      </table>
      <paginator paginator="$ctrl.paginator"></paginator>
    </div>
</div>
